<!DOCTYPE html>
<html>
<head>
    <title>趣味画板</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #f0f0f0;
        }
        #canvas {
            background: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .controls {
            position: fixed;
            top: 10px;
            left: 10px;
            padding: 10px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        button {
            margin: 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
        input[type="color"] {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="controls">
        <input type="color" id="colorPicker" value="#000000">
        <input type="range" id="brushSize" min="1" max="50" value="5">
        <button onclick="clearCanvas()">清除画布</button>
    </div>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const colorPicker = document.getElementById('colorPicker');
        const brushSize = document.getElementById('brushSize');
        
        // 设置画布大小
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;

        // 绘画功能
        function draw(e) {
            if (!isDrawing) return;
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.strokeStyle = colorPicker.value;
            ctx.lineWidth = brushSize.value;
            ctx.lineCap = 'round';
            ctx.stroke();
            [lastX, lastY] = [e.offsetX, e.offsetY];
        }

        canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
        });
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', () => isDrawing = false);
        canvas.addEventListener('mouseout', () => isDrawing = false);

        // 清除画布
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
    </script>
</body>
</html>